<template>
    <!-- pages/coupon/coupon.wxml -->
    <view class="container">
        <view class="tabs">
            <view
                :class="item.id === status ? 'tab border-primary color-primary active' : 'tab'"
                @tap="tabChange"
                :data-status="item.id"
                v-for="(item, index) in tabs"
                :key="index"
            >
                {{ item.name }}
            </view>
        </view>

        <block v-if="MainList.length">
            <!-- 暂不使用 -->
            <block v-if="status == 0">
                <view class="nouse" v-if="from">
                    <text class="name">不使用优惠券</text>
                    <view :class="couponId === 0 ? 'select iconfont icon-xuanzhong color-primary' : 'select iconfont icon-xuanze'" @tap="choose" data-couponId="0"></view>
                </view>
            </block>
            <view
                :class="item.enable ? 'coupon' : 'coupon disable'"
                :data-info="item"
                @tap="choose"
                :data-couponId="item.couponId"
                :data-index="index"
                v-for="(item, index) in MainList"
                :key="index"
            >
                <block v-if="from">
                    <block v-if="item.status != 0">
                        <view class="tipInfo">
                            <view class="box">
                                <view class="label">{{ item.status === 1 ? '已使用' : '已过期' }}</view>
                                <!-- <view wx:if="{{item.status === 1}}">使用时间：{{item.useTime}}</view> -->
                            </view>
                        </view>
                    </block>
                    <block v-else-if="item.type == 1 || item.type == 3">
                        <block v-if="item.enable == false">
                            <!-- <block wx:if="{{submit_order_hour < item.minUsePrice}}"> -->
                            <view class="tipInfo">
                                <view class="box">
                                    <view class="label">不符合使用条件</view>
                                </view>
                            </view>
                        </block>
                    </block>
                    <block v-else-if="item.type == 2">
                        <block v-if="item.enable == false">
                            <!-- <block wx:if="{{pricestring < item.minUsePrice}}"> -->
                            <view class="tipInfo">
                                <view class="box">
                                    <view class="label">不符合使用条件</view>
                                </view>
                            </view>
                        </block>
                    </block>
                </block>

                <view class="right">
                    <view class="name">{{ item.couponName }}</view>
                    <view class="line">
                        <label>类型：</label>
                        {{ item.type === 1 ? '抵扣券' : item.type === 2 ? '满减券' : '加时券' }}
                    </view>
                    <view class="line">
                        <label>适用门店：</label>
                        {{ item.storeName ? item.storeName : '不限制门店' }}
                    </view>
                    <view class="line">
                        <label>适用包间：</label>
                        {{
                            item.roomType === 1
                                ? '小包'
                                : item.roomType === 2
                                ? '中包'
                                : item.roomType === 3
                                ? '大包'
                                : item.roomType === 4
                                ? '豪包'
                                : item.roomType === 5
                                ? '商务包'
                                : '不限制'
                        }}
                    </view>
                    <view class="line">
                        <label>过期时间：</label>
                        {{ item.expriceTime }}
                    </view>
                </view>

                <block v-if="item.type === 1 || item.type === 3">
                    <view class="left bg-primary1">
                        <view class="info">
                            <view class="price">{{ item.price }}小时</view>
                            <view class="desc">满{{ item.minUsePrice }}小时可用</view>
                            <!-- <view wx:if="{{!from}}" class="btn" bindtap="touse" data-info="{{item.storeId}}">立即使用</view> -->
                        </view>
                    </view>
                </block>

                <block v-if="item.type === 2">
                    <view class="left bg-primary2">
                        <view class="info">
                            <view class="price">
                                <text>￥</text>
                                {{ item.price }}元
                            </view>
                            <view class="desc">满{{ item.minUsePrice }}元可使用</view>
                            <!-- <view wx:if="{{!from}}" class="btn" bindtap="touse" data-info="{{item.storeId}}">立即使用</view> -->
                        </view>
                    </view>
                </block>
            </view>
        </block>
        <view class="no-coupon" v-else>
            <!-- 暂无数据 -->
            <image src="/static/pages/static/icon/coupon.png" class="coupon-icon" />
            <view class="text">暂无卡券</view>
        </view>
    </view>
</template>

<script>
// pages/coupon/coupon.js
var http = require('../../utils/http');
var util1 = require('../../utils/util.js');
const app = getApp();
export default {
    data() {
        return {
            tabs: [
                {
                    id: 0,
                    name: '未使用'
                },
                {
                    id: 1,
                    name: '已使用'
                },
                {
                    id: 2,
                    name: '已过期'
                }
            ],
            status: 0,
            userinfo: {},
            //用户信息
            MainList: [],
            //列表数组
            canLoadMore: true,
            //是否还能加载更多
            pageNo: 1,
            is_have: true,
            from: false,
            //跳转来源（使用和展示）
            roomType: '',
            //房间类型
            roomId: '',
            //房间
            storeId: '',
            //门店Id
            couponId: '',
            //选取的优惠券
            pricestring: 0,
            submit_order_hour: 0,
            nightLong: false,
            startTime: '',
            endTime: '',
            orderHour: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        let that = this;
        console.log(options);
        this.setData({
            from: options.from ? options.from : false
        });
        if (options.roomId) {
            that.setData({
                roomId: options.roomId,
                submit_order_hour: options.orderHours,
                nightLong: options.nightLong,
                startTime: options.startTime,
                endTime: options.endTime
            });
        }
        this.getListData('refresh');
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getuserinfo();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        let that = this;
        this.setData({
            pageNo: 1,
            is_have: true,
            MainList: []
        });
        this.getListData('refresh');
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        let that = this;
        if (that.is_have) {
            that.pageNo++;
            this.getListData('');
        } else {
            uni.showToast({
                title: '我是有底线的...'
            });
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // tab切换
        tabChange: function (e) {
            var status = e.currentTarget.dataset.status; //获取当前点击的下标
            this.setData({
                status: status
            });
            this.getListData('refresh');
        },

        // 获取用户信息
        getuserinfo: function () {
            var that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/user/get',
                    '1',
                    'get',
                    {},
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('我的信息===');
                        console.info(info);
                        if (info.code == 0) {
                            that.setData({
                                userinfo: info.data
                            });
                        }
                    },
                    function fail(info) {}
                );
            } else {
                //console.log('未登录失败！')
            }
        },

        //获取列表数据
        getListData: function (e) {
            var that = this;
            let message = '';
            if (app.globalData.isLogin) {
                if (e == 'refresh') {
                    //刷新，page变为1
                    message = '正在加载';
                    that.setData({
                        pageNo: 1
                    });
                }
                http.request(
                    '/member/user/getCouponPage',
                    '1',
                    'post',
                    {
                        pageNo: that.pageNo,
                        pageSize: 10,
                        status: that.status,
                        roomId: that.roomId,
                        nightLong: that.nightLong,
                        startTime: that.startTime,
                        endTime: that.endTime
                    },
                    app.globalData.userDatatoken.accessToken,
                    message,
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            if (e == 'refresh') {
                                that.setData({
                                    MainList: info.data.list
                                });
                                if (info.data.list.length === 0) {
                                    that.setData({
                                        canLoadMore: false
                                    });
                                }
                            } else {
                                if (info.data != null && info.data.list.length <= info.data.total) {
                                    that.setData({
                                        canLoadMore: false
                                    });
                                }
                                let arr = that.MainList;
                                let arrs = arr.concat(info.data.list);
                                that.setData({
                                    MainList: arrs
                                });
                            }
                        } else {
                            uni.showModal({
                                content: '请求服务异常，请稍后重试',
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            } else {
                uni.showModal({
                    content: '请您先登录，再重试！',
                    showCancel: false
                });
            }
        },

        // 个人中心进入，去使用，跳转到房间列表
        touse: function (e) {
            // var storeId = storeIds[0]
            // wx.navigateTo({
            //   url: '../doorList/doorList?storeId='+storeId,
            // })
            uni.switchTab({
                url: '../index/index'
            });
        },

        // 其他页面进入，选择
        // 选取优惠券
        choose: function (e) {
            var that = this;
            if (e.currentTarget.dataset.couponid == '0') {
                const eventChannel = that.getOpenerEventChannel();
                // 通过触发相关事件传递数据
                eventChannel.emit('pageDataList_no', 1);
                uni.navigateBack({
                    delta: 1
                });
                return;
            }
            if (!e.currentTarget.dataset.info.enable) {
                return;
            }
            if (!that.from) {
                return;
            }
            var acouponId = e.currentTarget.dataset.couponId; //获取当前点击的下标
            var aindex = e.currentTarget.dataset.index;
            var aboj = that.MainList[aindex];
            //判断当前优惠券是否可用
            var acouponbool = aboj.enable;
            if (!acouponbool) {
                uni.showModal({
                    title: '温馨提示',
                    content: '当前优惠券不满足使用情况！',
                    showCancel: false
                });
                return;
            }
            console.info('点击优惠券===');
            console.info(aboj);
            if (acouponId) {
                that.setData({
                    couponId: acouponId
                });
            }
            setTimeout(() => {
                const eventChannel = that.getOpenerEventChannel();
                // 通过触发相关事件传递数据
                if (aboj) {
                    eventChannel.emit('pageDataList', aboj);
                } else {
                    eventChannel.emit('pageDataList_no', 1);
                }
                uni.navigateBack({
                    delta: 1
                });
            });
        },

        // 已使用点击跳转到订单详情
        clickItem: function (e) {
            var info = e.currentTarget.dataset.info;
            if (info.status === 1) {
                uni.navigateTo({
                    url: '../orderDetail/orderDetail?toPage=true&OrderNo=' + info.orderId
                });
            }
        }
    }
};
</script>
<style>
@import './coupon.css';
</style>
